<template>
	<view class="bzcenter">
		<headertop title="帮助中心" :back1="back1" str1="oridei"></headertop>
		<image :src="_static('/images/Group 11469@2x.png')" class="bzcenter_back" mode="widthFix"></image>
		<view class="headertext">
			<view class="t1">
				Hi~有什么可以帮您！
			</view>
			<view class="t2">
				常见的问题
			</view>
		</view>
		<view class="bottomcontent">
			<view class="center">
				<view class="title">
					常见问题
				</view>
				<view class="cjwt">
					<view class="msgicon" v-if="!wentiarr.length">
						<image :src="_static('/images/wxnone.png')" mode="widthFix">
						</image>
						<view class="msgtext">
							暂无常见问题
						</view>
					</view>
					<view class="itemcontent" v-for="item in wentiarr" :key="item.id"
						:style="{'height':item.bool?'':'72rpx'}" @click="item.bool=!item.bool">
						<view class="centeritem">
							<view class="text">
								{{item.title}}
							</view>
							<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(20).png"
								class="rightarrow" :style="{'rotate':item.bool?'90deg':'0deg'}" mode="">
							</image>
						</view>
						<view class="bottomtext">
							<view class="texts">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		_static
	} from '@/ulm/utils/url.js'
	import headertop from '@/components/header.vue'
	import {
		ref
	} from 'vue'
	const flag = ref(false)
	import {
		$api
	} from '../../ulm';

	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'
	const wentiarr = ref([])
	const back1 = ref('')
	onLoad(() => {
		init()
	})
	async function init() {
		const res = await $api.helplist()
		if (res.code == 1) {
			wentiarr.value = res.data
			for (var i in wentiarr.value) {
				wentiarr.value[i]['bool'] = false
			}
		}
	}
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#FBE7D2'
		} else {
			back1.value = ''
		}

	})
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.bzcenter {
		width: 100%;
		overflow: hidden;
		position: relative;

		&_back {
			width: 100%;
			height: 664rpx;
			position: absolute;
			z-index: -1;
		}

		.bottomcontent {
			width: 100%;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: 72rpx;

			.center {
				width: 688rpx;
				margin: auto;
				overflow: hidden;
				margin-top: 46rpx;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #1D2129;
				}

				.cjwt {
					width: 100%;
					margin-top: 32rpx;
					overflow: hidden;

					.itemcontent {
						width: 686rpx;
						overflow: hidden;
						background: #F7F8FA;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						margin-bottom: 24rpx;
						transition: 0.5;

						.bottomtext {
							width: 638rpx;
							border-top: 2rpx solid #FFFFFF;
							margin: auto;
							margin-top: 15rpx;

							.texts {
								width: 100%;
								margin-top: 18rpx;
								margin-bottom: 30rpx;
								overflow: hidden;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #86909C;
							}
						}

						.centeritem {
							width: 638rpx;
							margin: auto;
							display: flex;
							align-items: center;
							justify-content: space-between;
							overflow: hidden;
							height: 72rpx;

							.text {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #1D2129;
								white-space: normal;
								width: 500rpx;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.rightarrow {
								width: 32rpx;
								height: 32rpx;
								transition: 0.5s;
							}
						}
					}
				}
			}
		}

		.headertext {
			width: 688rpx;
			margin: auto;
			margin-top: 236rpx;
			overflow: hidden;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				margin-top: 20rpx;
			}
		}
	}
</style>